<template>
	<view class="">
		<view class="tabbar" :style="{backgroundColor:bgColor, height:navInfo.navHeight+'px;' }">
			<view class="toBg" v-show="bgShow" :style="{height:bgheiht+'px'}">
				<image :src="img" class="bg" mode=""></image>
			</view>
			<view class="tit" :style="{height:navInfo.menuHeight+'px;'}">
				<image src="/static/zuo.png" v-show="back" @click="backs()" class="jian" mode="widthFix">
				</image>
				<view class="tit_name">
					{{name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			// 名字
			name: {
				type: String,
				default: ''
			},
			// 需不需要返回按钮
			back: {
				type: Boolean,
				default: false
			},
			//背景存不存在
			bgShow: {
				type: Boolean,
				default: false
			},
			// 背景图的高度px
			bgheiht: {
				type: Number,
				default: 250
			},
			//背景图片
			img: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: 'transparent'
			}
		},
		data() {
			return {
				navInfo: {}
			}
		},
		created() {
			console.log('789456123');
			let obj = {
				// 获取胶囊信息
				menuButtonObject: {
					bottom: 95,
					height: 32,
					left: 334,
					right: 421,
					top: 63,
					width: 87
				},
				// 整个导航栏的高度
				navHeight: 103,
				// 导航栏的高度
				nav: 44,
				// 胶囊与左边的距离
				menuLeft: 334,
				// 胶囊的高度
				menuHeight: 32,
				// 胶囊距离顶部的高度
				menuBot: 4,
				// 整个设备的宽度
				windowWidth: 428
			}
			// #ifdef MP-WEIXIN
			obj.menuButtonObject = wx.getMenuButtonBoundingClientRect()
			// 获取设备信息
			wx.getSystemInfo({
				success: res => {
					obj.navHeight = obj.menuButtonObject.top + obj.menuButtonObject.height + (obj
						.menuButtonObject
						.top - res.statusBarHeight) * 2
					obj.nav = obj.navHeight - res.statusBarHeight
					obj.menuLeft = obj.menuButtonObject.left
					obj.menuHeight = obj.menuButtonObject.height
					obj.menuBot = obj.menuButtonObject.top - res.statusBarHeight
					obj.windowWidth = res.windowWidth
					uni.setStorageSync('ht', obj.navHeight)
				},
				fail: err => {
					console.log(err)
				}
			})

			// #endif

			this.navInfo = obj
		},
		methods: {
			backs() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.toBg {
		height: 250px;
		width: 100%;
		position: fixed;
		top: 0%;
		left: 0;
		z-index: -1;

		.bg {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}

	.tabbar {
		// background-color: pink;
		width: 100%;
		position: fixed;
		top: 0;
		z-index: -1;

		.tit {
			// position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			.jian {
				position: absolute;
				left: 20px;
				width: 30rpx;
				z-index: 999999;
			}

			.tit_name {
				font-size: 32rpx;
			}
		}
	}

	.tit {
		position: absolute;
		width: 100%;
		text-align: center;
		bottom: 17px;
	}
</style>